<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>upload模块快速使用</title>
    <link rel="stylesheet" href="../css/layui.css" media="all">
    <!--layui的js部分-->
    <script src="../layui.js"></script>
</head>
<body>

<div class="layui-upload">
    <button type="button" class="layui-btn" id="upload_btn">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="imgPreview">
        <!--显示重新加载字样的p标签-->
        <p id="demoText"></p>
    </div>
</div>

<!--表单部分-->
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读" checked>
            <input type="checkbox" name="like[dai]" title="发呆">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="switch" lay-skin="switch">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use('upload', function(){
        var upload = layui.upload,$=layui.$;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload_btn' //绑定元素
            ,url: 'http://localhost:8080/mss/upload' //上传接口
            //当图片选好之后,显示预览就需要before配置
            ,before: function(obj){
                obj.preview(function (index, file, result) {
                    $('#imgPreview').attr('src', result); //图片链接（base64）
                });
            }
            // 当图像上传完成后的回调
            ,done: function(res){
                if (res.code == 0){
                    console.log("fileName:"+res.fileName);
                    // 上传成功后,获取后端传回的文件名, 填充到表单的隐藏域上
                    // 当注册提交的时候, 该隐藏域会连同其他表单项一并提交给后端作注册操作
                    $("input[name=fileName]").val(res.fileName)
                    return layer.msg('文件上传成功!');
                }else if (res.code == 2) {
                    return layer.msg('不支持该上传类型');
                }else if (res.code == 3) {
                    return layer.msg('文件为空');
                }else {
                    return layer.msg('文件上传异常');
                }
            }
            ,error: function(){
                //请求异常回调
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>
</body>
</html>
